<template>
  <p>子组件Foo</p>
  <h1>{{ msg }}</h1>
  <h3>显示标题</h3>
  <h3>这是数字：{{ count }}</h3>
  <button @click="count++">增加数字</button>
  <Child />
</template>

<script>
import {
  ref,
  watchEffect,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from 'vue'
import Child from '@/components/Child.vue'
export default {
  name: 'Foo',
  components: { Child },
  props: {
    msg: {
      type: String,
      required: true,
    },
  },
  emits: ['aaa'],
  setup(props, context) {
    console.log(props.msg, '111')

    let count = ref(0)
    // onBeforeMount(() => {
    //   console.log('onBeforeMount执行了。。')
    // })
    // onMounted(() => {
    //   console.log('onMounted执行了。。')
    // })
    // onBeforeUpdate(() => {
    //   console.log('onBeforeUpdate执行了。。')
    // })
    // onUpdated(() => {
    //   console.log('onUpdated执行了。。')
    // })
    // onBeforeUnmount(() => {
    //   console.log('onBeforeUnmount执行了。。')
    // })
    // onUnmounted(() => {
    //   console.log('onUnmounted执行了。。')
    // })

    console.log(props)
    context.emit('aaa', 1)

    watchEffect(() => {
      props.msg
      count.value
      console.log('watchEffect')
    })

    return {
      count,
    }
  },
}
</script>

<style></style>
